<template>
    <div class="timing">
      <el-row style="margin-bottom:10px;">
        <el-col :span="24">
          <el-form :inline="true" :model="formInline" class="demo-form-inline queryFrom">
            <el-form-item label="服务对象名称">
              <el-input v-model="formInline.dataModelName" clearable placeholder="请输入服务对象名称" />
            </el-form-item>
            <el-form-item>
              <el-button plain @click="getUserList"><Icon type="ios-search" />查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <!-- 按钮 -->
      <el-row style="margin-bottom:10px;">
        <el-col :span="24">
          <el-button type="primary" @click="addUser('add')"><Icon type="md-add" />创建服务对象</el-button>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <ykhttb ref="httbRef"
        width="250" 
        :btn-is-show="btnIsShow"
        :table-col="tabUserList" 
        :table-data="tableUserData"
        @getDataDetileInfo="getDataDetileInfo"
         @deleteSelectData="deleteSelectData" @refresh="getUserList" />
      <!-- 分页 -->
      <div style="text-align:right;margin-top:10px;">
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
  
      <el-dialog :close-on-click-modal="false" :title="title" width="50%" :visible.sync="dialogTableVisible">
        <!-- 名称和路径必输 -->
        <el-form v-if="dialogTableVisible" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm autoClass">
          <el-form-item label="服务对象名称" prop="serverObjectName">
            <el-input :disabled="disFlag"  v-model="ruleForm['serverObjectName']" clearable placeholder="" />
          </el-form-item>
          <el-form-item label="联系人" prop="linkman">
            <el-input :disabled="disFlag"  v-model="ruleForm['linkman']" clearable placeholder="" />
          </el-form-item>
          <el-form-item label="联系电话" prop="relationNum">
            <el-input :disabled="disFlag"  v-model="ruleForm['relationNum']" clearable placeholder="" />
          </el-form-item>
          <el-form-item label="状态" prop="status">
              <el-select :disabled="disFlag" v-model="ruleForm['status']" placeholder="请选择">
                <el-option label="正常" :value="v1"></el-option>
                <el-option label="禁用" :value="v2"></el-option>
              </el-select>
          </el-form-item>
        </el-form>
        <div style="text-align: center;" v-if="!disFlag">
          <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
          <el-button @click="resetForm('return')">返回</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { serverObjectpage, serverObjectsave, serverObjectdelete } from '@/api/zt/index'
  import experiment from '@/mixins/experiment'
  import {validatePhone} from "@/utils/validate"
  
  export default {
    components: {
    },
    mixins: [experiment],
    data() {
      return {
        v1:1,
        v2:0,
        btnIsShow: {
          operate: true,
          detile: true,
          del: true
        },
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        title: '新增',
        rules: {
          serverObjectName:[
            { required: true, message: '请输入服务对象名称', trigger: 'change' }
          ],
          linkman:[
            { required: true, message: '请输入联系人', trigger: 'change' }
          ],
          relationNum:[
            { required: true, validator: validatePhone, trigger: 'change'  }

          ],
        },
        dialogTableVisible: false,
        ruleForm: {
          "createTime": "",
          "id": 0,
          "linkman": "",
          "relationNum": "",
          "serverObjectName": "",
          "spare1": "",
          "spare2": "",
          "status": 0,
          "updateTime": ""
        },
        userId: '',
        formInline: {
          'dataModelName': ''
        },
        tableUserData: [],
        tabUserList: [
          {
            key: 'serverObjectName',
            title: '服务对象名称'
          },
          {
            key: 'linkman',
            title: '联系人'
          },
          {
            key: 'relationNum',
            title: '联系电话'
          },
          {
            key: 'appKey',
            title: 'appKey'
          },
          {
            key: 'createTime',
            title: '创建时间'
          },
          {
            key: 'status',
            title: '状态'
          }
        ],
        selectDataList: [],
        total: 0,
        size: 10,
        page: 1
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.getUserList()
        this.getcodequery('subjectDirectoryType')
      })
    },
    methods: {
        getName(){
            this.selectDataList.forEach((item,index)=>{
                if(this.ruleForm['subjectDirectoryTypeNum']==item.num){
                    this.ruleForm['subjectDirectoryTypeName'] = item.name
                }
            })
        },
      deleteSelectData(v) {
        const ids = [v.id]
        serverObjectdelete(ids).then(res => {
          if (res.code == 200) {
            this.getUserList()
          } else {
            this.errorDialog(res.msg)
          }
        })
      },
      handleNodeClick(data) { },
      commitFromData() {
        serverObjectsave(this.ruleForm).then(res => {
            if (res.code == 200) {
              this.getUserList()
            } else {
              this.errorDialog(res.msg)
            }
          })
      },
      handleSizeChange(v) {
        this.page = 1
        this.size = v
        this.getUserList()
      },
      handleCurrentChange(v) {
        this.page = v
        this.getUserList()
      },
  
      // 获取用户列表
      getUserList() {
        this.dialogTableVisible = false
        this.$refs.httbRef.isShowLoading(true)
        serverObjectpage({
          'pageIndex': this.page,
          'pageSize': this.size,
          'or_orderby_createTime':'',
          'sk_like_serverObjectName': this.formInline.dataModelName
        }).then(res => {
          this.tableUserData = res.data.records
          this.total = res.data.total
          this.$refs.httbRef.isShowLoading(false)
        })
      }
    }
  }
  </script>
  
          <style lang="scss" scoped>
          >>>.jsoneditor-poweredBy {
            display: none !important;
          }
  
          .addPs{
            display: flex;
            flex-direction: row;
            margin-bottom: 10px;
            >div{
              width:50%
            }
            span{
              display: inline-block;
              width: 10%;
            }
          }
       

          .autoClass{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            .el-form-item{
              width:50%;
            }
          }
          .addcs{
            display: flex;
            flex-direction: row;
            margin-bottom: 10px;
          }
          .addcs2 .el-select {
            display: inline-block;
            width: 240px;
          }
          .autoInput{
            display: inline-block;
            width: 70%;
          }
          .infoTitle{
            border-bottom:1px solid #e5e5e5;
            margin-bottom: 30px;
            position: relative;
          }
          .infoTitle>span{
            position: absolute;
            left: 20px;
            background: #fff;
            width:80px;
            top:-15px;
            height:30px;
            text-align: center;
            line-height: 30px;
          }
            .el-select{
               width:100%;
            }
            .timing{
              background:#fff;
              padding:20px;
            }
          </style>
  